<template>
    <div class="main">
      <div class="login-body">
        <div class="form">
          <div class="logo">
            <div class="pic"></div>
            <h1>植物表型数据管理系统</h1>
          </div>
          <el-form style="padding: 10px" :model="lfm" ref="lfRef" :rules="rules">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="用户名:" prop="username" :label-width="80" style="width: 80%">
                  <el-input
                    v-model="lfm.username"
                    placeholder="请输入用户名"
                    style="height: 40px; width: 80%"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="密码:" prop="password" :label-width="80" >
                  <el-input
                    type="password"
                    v-model="lfm.password"
                    show-password
                    placeholder="请输入密码"
                    style="height: 40px; width: 80%"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="验证码:" prop="captcha" :label-width="80" >
                  <el-input
                    placeholder="请输入验证码"
                    v-model="lfm.captcha"
                    maxlength="4"
                    minLength="4"
                    style="height: 40px"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <img
                  class="captcha"
                  :src="captchaUrl"
                  style="height: 45px"
                  @click="refresh"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="display: flex; justify-content: center">
                <el-button
                  type="primary"
                  class="login-btn"
                  @click="submitLogin"
                  style="height: 40px; width: 70%"
                  >登&nbsp;&nbsp;录</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="mask"></div>
    </div>
  </template>
  
  <style scoped>
  .main {
    height: 100%;
    background: url("@/assets/bg.jpg") no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .main > .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .login-body {
    width: 450px;
    height: 400px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    z-index: 1000;
  }
  .form .logo {
    width: 100%;
    display: flex;
    height: 80px;
    background-color: #f3f8fe;
  }
  .form .logo::after {
    content: "";
    display: block;
    clear: both;
  }
  .form .logo > .pic {
    float: left;
    height: 70px;
    width: 170px;
    background: url("@/assets/logo.png") no-repeat center center/cover;
  }
  
  .login-body > .form {
    flex-grow: 1;
  }
  
  .login-body > .form .logo > h1 {
    margin-left: 20px;
    display: inline-block;
    line-height: 40px;
    font-size: 20px;
    color: #333;
    text-align: center;
  }
  
  .login-btn {
    width: 100%;
    height: 50px;
    background-color: #16b777;
    color: #fff;
    font-size: 18px;
  }
  
  .captcha {
    cursor: pointer;
  }
  </style>
  
  <script setup>
  import { ref } from "vue";
  import adminApi from "@/api/AdminApi";
  import jwtApi from "@/api/JwtApi";
  import userNameApi from "@/api/UserNameApi";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  import { onMounted } from "vue";
  
  //获取路由转发器
  const router = useRouter();
  
  //当组件挂载结束之后调用
  onMounted(() => {
    document.title = "植物表型数据管理系统";
  });
  //登录数据模型
  const loginFormModel = ref({
    username: "",
    password: "",
    captcha: "",
  });
  const lfm = loginFormModel;
  
  let lfRef; //表单实例
  // //提交登录
  function submitLogin() {
    lfRef.validate().then((success) => {
      if (success) {
        adminApi.login(lfm.value).then((resp) => {
          console.log(resp);
          if (resp.code == 0) {
            // Save token
            jwtApi.save(resp.data);
            // Store username
            userNameApi.save(lfm.value.username);
            // Navigate to home route
            router.push("/");
          } else {
            // Show error message
            ElMessage({
              message: resp.msg,
              type: "error",
            });
            // Refresh CAPTCHA after login attempt fails
            refresh();
          }
        });
      }
      refresh();
    });
  }
  
  const captchaUrl = ref("/api/users/captcha");
  
  //刷新验证码
  function refresh() {
    captchaUrl.value = "/api/users/captcha?id=" + Math.random();
  }
  
  const rules = ref({
    username: [{ required: true, message: "用户名不可为空" }],
    password: [{ required: true, message: "密码不可为空" }],
    captcha: [
      { required: true, message: "验证码不可为空" },
      { min: 4, max: 4, message: "验证码只能是4位" },
    ],
  });
  </script>